import React ,{useState ,useCallback ,useEffect} from 'react';

// 获取屏幕的尺寸  的hooks自定义方法
function useWinSize(){
    const [size, setSize] = useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight,
    })

    // 缓存方法
    const onResize = useCallback(()=>{
        setSize({
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight,
        })        
    },[])

    useEffect(()=>{
        window.addEventListener('resize',onResize,false)//屏幕监听事件  第三个参数默认false
        return()=>{
            window.removeEventListener('resize',onResize,false)
        }
    })

    return size;
}

export default useWinSize;